<template>
  <view>
    <view class="item" v-for="i in news" :key="i.id" @tap="toNewsDetails(i)">
      <view class="avator">
        <img class="news-img" :src="i.src[0]" alt="" />
        <view class="name">{{ i.title }}</view>
      </view>
      <view class="info">
        <view class="desc">
          {{ i.content }}
        </view>
        <view class="pictures-box">
          <view class="pictures" v-for="(item, index) in i.src" :key="index">
            <img class="pyq" :src="item" alt="" />
          </view>
        </view>
        <view class="bottom">
          <view class="time">{{ i.time }}</view>
          <!-- <view class="button" @click="open()">
            {{ i.button }}
          </view> -->
          <view class="like" @tap="like(i)">
            <image
              class="img"
              :src="
                i.islove == 0
                  ? '../../../static/like.png'
                  : '../../../static/liked.png'
              "
            ></image>
          </view>
          <!-- 点赞 如果islove==1，图片变为点赞的图片-->
        </view>
        <view class="post-footer"> </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.item {
  background-color: #ffffff;
  padding: 10rpx 0;
  display: flex;
  overflow: hidden;
  .avator {
    padding-left: 40rpx;
    padding-top: 50rpx;
    flex-direction: column;
    .news-img {
      padding-left: 2rpx;
      width: 40px;
      height: 40px;
    }
    .name {
      font-size: 25rpx;
      color:  #443e3e;
      padding: 10rpx 0;
      padding-left:10rpx ;
    }
  }
  .info {
    border-bottom: 1px #efefef solid;
    padding-top: 30rpx;
    padding-left: 30rpx;
    .desc {
      padding: 10rpx 20rpx;
      width: 260px;
      //overflow: hidden;
      text-overflow: ellipsis;
      color: #979797;
      font-size: 24rpx;
      margin: 5px 0;
      margin-top: 10px;
    }
    .pictures-box {
      padding-left: 15rpx;
      flex-direction: row;
      width: 280px;
      .pyq {
        width: 80px;
        height: 80px;
      }
      .pictures {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
    .bottom {
      .button {
        padding: 10rpx;
        flex: 1;
        color: seagreen;
        border: 1rpx solid white;
      }
      .like {
        flex: 2;
        padding: 10rpx;
        .img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      news: [
        {
          id: 0,
          title: "  嘉神",
          content: " K8S里面多个container共享一个pod的网络栈以及端口范围也是基于此模式实现的。 每当一个Pod被创建，那么首先创建一个 “pause” 容器， ",
          src: [
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/15/2qrazF.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
          ],
          button: "评论",
          community_on: ["lalalal"],
          islove: 0,
          time: "4分钟前",
        },
        {
          id: 1,
          title: "  李嘉",
          content: "之后这个pod里面的其他容器通过共享这个pause容器的网络栈，实现与外部pod进行通信 ， 然后通过localhost进行pod内部的container的通信",
          src: [
            "https://z3.ax1x.com/2021/06/06/2Uauyn.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
          ],
          button: "评论",
          community_on: ["lalalal"],
          islove: 0,
          time: "1小时前",
        },
        {
          id: 2,
          title: "  李嘉",
          content:
            "集群单节点内的通信，主要包括两种情况，同一个pod内的多容器间通信以及同一节点不同pod间的通信。由于不涉及跨节点访问，因此流量不会经过物理网卡进行转发。",
          src: [
            "https://z3.ax1x.com/2021/06/15/2qrwM4.png",
            "https://z3.ax1x.com/2021/06/15/2qrwM4.png",
            "https://z3.ax1x.com/2021/06/15/2qrwM4.png",
          ],
          button: "评论",
          community_on: ["lalalal"],
          islove: 0,
          time: "2小时前",
        },
        {
          id: 3,
          title: "  李俊",
          content:
            "Veth设备的作用主要用在bridge模式中来提供一组网络接口来连接两个网络命名空间，docker自身生成一个veth pair(虚拟网卡对) 一端放在docker0网桥上， 一端放在容器内部。",
          src: [
            "https://z3.ax1x.com/2021/06/06/2Uauyn.png",
            "https://z3.ax1x.com/2021/06/15/2qrEVI.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
          ],
          button: "评论",
          community_on: ["lalalal"],
          islove: 0,
          time: "2小时前",
        },
        {
          id: 4,
          title: "  李娜",
          content:
            "是从现代人居特色与人性需求出发，结合绿城服务园区，以项目会所或其它公共资源为载体，以园区文化教育、娱乐生活为基本功能，而开发创立的具有绿城服务特色的、以睦邻社、沙龙、社团为运营模式的业主睦邻交流，沟通互动平台",
          src: [
            "https://z3.ax1x.com/2021/06/06/2Uauyn.png",
            "https://z3.ax1x.com/2021/06/15/2qrazF.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
            "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
          ],
          button: "评论",
          community_on: ["lalalal"],
          islove: 0,
          time: "3小时前",
        },
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
    };
  },
  methods: {
    open() {
      uni.showToast({
        title: "评论成功",
        duration: 1000,
        width: "20px",
        height: "20px",
      });
    },
    // 点赞
    like(i) {
      if (i.islove == 0) {
        i.islove = 1;
      } else {
        i.islove = 0;
      }
    },
  },
};
</script>